.tagBoxNew,
.tagBoxDocument
  width: 100%
  ul.taglist
  ul.tagit 
    cursor: text
    margin: 0
    padding-left: 0
    .ui-sortable 
      li.tagit-choice
        a.ui-icon
          .ui-icon-grip-dotted-vertical
            float: left
            width: 12px
            margin-left: -5px
            cursor: move
    li.tagit-new
      width: 100%
      padding: 0

      input,
      select
      .ui-helper-hidden-accessible
        float: right
        display: inline
        width: 25%
        font-size: 11px
        line-height: 14px
        color: $brand-secundary
        display: none
      input.tagit-input
        padding: 4px 8px 5px
        @include border-top-radius ($border-radius-base)
        @include border-bottom-radius ($border-radius-base)
        width: 100%
      input.tagit-input:active,
      input.tagit-input:focus

    li.tagit-choice
      @include border-top-radius ($border-radius-base)
      @include border-bottom-radius ($border-radius-base)
      cursor: pointer
      display: block
      float: left
      margin-right: 5px
      margin-bottom: 10px
      position: relative
      background-color: lighten($brand-secundary, 10%)
      color: $white
      padding: 3px 10px 3px 10px
      input
        display: block
        float: left
        margin: 0 5px 0 0
        padding-top: 2px
        padding-bottom: 2px
      .selected
        border-color: #f76464
        background-color: $brand-primary
      &:hover  
        background-color: lighten($brand-secundary, 20%)
        .tagit-close
          display: block
      a.tagit-close
        color: $brand-secundary
        cursor: pointer
        font-size: 16px
        font-weight: bold
        outline: medium none
        padding-left: 5px
        text-decoration: none
        position: absolute
        display: none
        top: -3px
        right: -3px
        &:hover
          color: darken($brand-secundary, 30%)

  ul.ui-sortable
  ul.tagit-suggestions
    list-style: none
    li.tagit-choice
      float: left
      background-color: lighten($brand-secundary, 10%)
      color: $white
      padding: 2px 4px 3px 4px
      margin-bottom: 5px
      margin-right: 5px
      display: block
      @include border-top-radius ($border-radius-base)
      @include border-bottom-radius ($border-radius-base)
      &:hover
        background-color: lighten($brand-secundary, 20%)
        border-color: #6d95e0
        a,
        a:hover
          color: $white

.ui-autocomplete
  cursor: pointer
  list-style: none
  margin: 25px 0 0
  padding: 0
  background-color: $white
  .ui-menu-item  
    padding: 0
    margin: 0
    a
      display: block
      padding: 4px 6px
      margin: 0
      text-decoration: none
      line-height: 12px
      border-bottom: 1px solid $gray-lighter-extra
      border-top: 1px solid $white
      color: #78959D
      &:hover
        background-color: lighten($brand-secundary, 20%)
        color: $white
      &:active
        background-color: lighten($brand-secundary, 20%)
        color: $white
    a.ui-state-hover,
    a.ui-state-active
      background-color: #c0d1e2
      color: $gray-darker
      border-color: #a6cef7

.tagit-hiddenSelect
  display:none

select.tagit-hiddenSelect
  display: inline-block !important

ul.single-line-tags 
  height: 23px /* This smells a bit */
  overflow: hidden

/* JQuery UI Base Style */

.ui-menu
  list-style:none
  padding: 2px
  margin: 0
  display:block
  float: left
  .ui-menu
    margin-top: -3px
  .ui-menu-item
    margin: 0
    padding: 0
    zoom: 1
    float: left
    clear: left
    width: 100%
    a
      text-decoration: none
      display: block
      padding: .2em .4em
      line-height: 1.5
      zoom: 1
    a.ui-state-hover,
    a.ui-state-active
      font-weight: normal


.tags-profile
  @include make-xs-column(12, $gutter: $grid-gutter-width)
  @include make-sm-column(12, $gutter: $grid-gutter-width)
  @include make-md-column(12, $gutter: $grid-gutter-width)
  @include make-lg-column(12, $gutter: $grid-gutter-width)
  display: block
  .tagit-new
    display: none
  li.tagit-choice
    float: left
    //background-color: lighten($brand-secundary, 30%)
    background-color: transparent
    color: $gray
    padding: 2px 
    margin-bottom: 3px
    width: 100%
    display: block
    @include border-top-radius ($border-radius-base)
    @include border-bottom-radius ($border-radius-base)
    text-align: left
    &:hover
      background-color: lighten($brand-secundary, 20%)
      border-color: #6d95e0
      a,
      a:hover
        color: $white
    .tagit-close
      display: none

// tags mensajes "para"
.select2-result-label
  img
    width: 50px
.tags_resource
  span:after
    content: ", " 
.box_description
  ul.tagit-suggestions
    li.tagit-choice
      @include border-top-radius ($border-radius-base)
      @include border-bottom-radius ($border-radius-base)
      cursor: pointer
      display: block
      float: left
      margin-right: 5px !important
      margin-bottom: 6px
      position: relative
      background-color: lighten($brand-secundary, 10%)
      //border-left: 5px solid darken($brand-secundary, 10%)
      color: $white
      padding: 3px 10px 3px 10px
      &:hover  
        background-color: lighten($brand-secundary, 20%)
      a
        color: $white
        &:hover
          text-decoration: none
